<template>
  <div class="skinVos">
    <topTitle :title="title"/>
    <!-- <div class="props" v-for="(item, index) in propsData" :key="index">
      <topTitle :title="item.title"/>
      <div class="props-class">
        <div class="props-class-main">
          <div class="props-class-list" v-for="(propsItem, propsIndex) in item.props" :key="propsIndex">
            <input class="skin-input" type="checkbox" :value="propsItem" :id="'skin' + propsItem.propId" v-model="checkedSkins">
            <label class="skin-label" :class="{ 'cancel-check': showCheck }" :for="'skin' + propsItem.propId">
              <div class="props-img">
                <img :src="propsItem.imgUrl" alt="">
              </div>
            </label>
            <span class="props-name">{{ propsItem.name }}</span>
          </div>
        </div>
      </div>
    </div> -->
    <el-tabs class="props" type="border-card">
      <el-tab-pane v-for="(item, index) in propsData" :key="index">
        <template slot="label">
            <span>{{ item.title || '语音包' }} ({{ item.props && item.props.filter((propsItem) => propsItem.hasGet).length || 0}})</span>
        </template>
        <div class="props-class">
          <div class="props-class-main">
            <template v-for="(propsItem, propsIndex) in item.props">
              <propsClassList v-if="auditStatus !== 0 && propsItem.hasGet" :showLevel="title === '特效枪'" :propsItem="propsItem" :key="propsIndex"></propsClassList>
              <!-- 只有待审核状态及已经拥有的展示 -->
              <propsClassList
                v-if="auditStatus === 0 && propsItem.hasGet"
                :showCheck="showCheck"
                :propsItem.sync="propsItem"
                @checkSkin="checkSkin"
                :auditStatus="auditStatus"
                :index="index"
                :propsIndex="propsIndex"
                :showLevel="title === '特效枪'"
                :key="propsIndex">
              </propsClassList>
            </template>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import propsClassList from './propsClassList'
export default {
  components: {
    propsClassList
  },
  props: {
    propsData: {
      type: Array,
      default: () => []
    },
    title: String,
    auditStatus: Number,
    editText: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      checkedSkins: [],
      showCheck: true
    }
  },
  created () {
  },
  watch: {
    editText (edit) {
        if (edit === 1) {
            this.showCheck = false
        } else {
            this.showCheck = true
        }
    }
    // propsData: {
    //   handler: function () {
    //     this.initChecks()
    //   },
    //   immediate: true
    // },
    // checkedSkins (checkedSkins) {
    //     console.log(checkedSkins)
    // }
  },
  methods: {
    initChecks () {
        let checkedSkins = []
        this.propsData.forEach(item => {
            for (let i = 0; i < item.props.length; i++) {
              if (item.props[i].hasGet) {
                  checkedSkins.push(item.props[i])
              }
            }
        })
        this.checkedSkins = checkedSkins
    },
    checkSkin (index, propsIndex) {
        let hasGet = this.propsData[index].props[propsIndex].hasGet
        this.$set(this.propsData[index]['props'][propsIndex], 'hasGet', !hasGet)
    }
  }
}
</script>
<style lang="scss" scoped>
  .skinVos{
    margin: 20px 0;
    .props {
      margin: 0 0 20px;
    }
    .props-title{
      margin: 10px 0;
    }
    .props-class{
      .props-class-main{
        display: flex;
        flex-wrap: wrap;
      }

    }
  }
</style>
